html,body,h4,p{
    margin: 0;
    padding: 0;
}
body{
    font-size: 0.3rem;
    //不允许选中
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select:none;
}
.bg{
    height: 4.7rem;
    border-radius: 0 0 1.4rem 1.4rem;
    background: linear-gradient(to right,#c8d904,#27b18c);
    position: absolute;
    top: 0;
    z-index: -3;
    width: 100%;
    .text{
        width: 2.6rem;
        height: 0.54rem;
        background: url(../img/title.png) no-repeat center;
        background-size: 100% 100%;
        margin: 0.65rem auto 0;
    }
}

.box{
    width: 6.36rem;
    border-radius: 0.1rem;
    box-shadow: 0 0 0.1rem #ccc;
    margin: 0.4rem auto 0.4rem;
}
.dayFlow{
    min-height: 5.07rem;
    overflow: hidden;
    background: #fff;
    margin: 1.7rem auto 0.4rem;
}
.dayFlow .tit{
    padding: 0.3rem 0;
    text-align: center;
    font-size: 0.34rem;
    color: rgb(135,135,135);
    /*border: 0;*/
    position: relative;
}
.dayFlow .tit #iconMore{
    width: 0.22rem;
    height: 0.12rem;
    display: block;
    position: absolute;
    background: url(../img/day.png) no-repeat center;
    background-size: contain;
    left: 50%;
    margin-left: 0.4rem  ;
    top: 50%;
    /*margin-top: -0.06rem;*/
}
.dayFlow .tit>input{
    font-size: 0.3rem;
    color: rgb(135,135,135);
    text-align: center;
    border: 0;
}
.dayFlow .valueBox{
    height: 1.4rem;
}
.dayFlow .valueBox .val1{
    font-size: 0.7rem;
    color: rgb(0,170,131);
    text-align: center;
}
.dayFlow .valueBox .val2{
    font-size: 0.26rem;
    color: rgb(153,153,153);
    text-align: center;
}
.PHBox{
    overflow: hidden;
}
.PHBox .tit{
    height: 0.75rem;
    background:linear-gradient(to left, #2ab190, #d0d902);
}
.PHBox .tit .titCon{
    width: 2.5rem;
    margin: 0 auto;
    text-align: center;
}
.PHBox .tit .titCon .icon{
    float: left;
    width:0.11rem ;
    height: 0.18rem;
    background: url(../img/dateL.png) no-repeat center;
    background-size: cover;
    margin-top: 0.28rem;
}
.PHBox .tit .titCon .right{
    background: url(../img/dateR.png) no-repeat center;
    background-size: cover;
    float: right;
}
.PHBox .tit .titCon>input{
    font-size: 0.34rem;
    color: #fff;
    background: transparent;
    text-align: center;
    border: 0;
    width: 2rem;
    height:0.75rem ;
    line-height: 0.75rem;
}
.PHBox .valueBox{
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
    font-size: 0.26rem;
    color: #27b18d;
}
.PHBox .valueBox>span{
    font-weight: 600;
}
.guolvBox{
    height: 4.6rem;
    background:linear-gradient(to left, #feb75b, #fd598c);
    margin: 0 auto;
}
.guolvBox .tit{
    height: 1.1rem;
    line-height: 1.1rem;
    width: 6.36rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    .left{
        font-size: 0.36rem;
        color: #fff;
//      float: left;
        position: absolute;
    }
    .right{
        position: relative;
        text-align: center;
        >input{
            font-size: .3rem;
            color: #878787;
            text-align: center;
            border: 0; 
            background: transparent;
            color: #fee;
//          position: absolute;
            
        }
        #iconMore1 {
            width: .22rem;
            height: .12rem;
            display: block;
            position: absolute;
            background: url(../img/daywhite.png) no-repeat center;
            background-size: contain;
            left: 50%;
            margin-left: .4rem;
            top: 50%;
        }
    }
}
.guolvBox .conBox{
    background: #fff;
    width: 4.8rem;
    padding:0.3rem 0.78rem;
    margin: 0 auto;
    border-radius: 0.1rem;
    box-shadow: 0 0 0.1rem #ccc;
    overflow: hidden;
    
}
.guolvBox .conBox .circleBox{
    height: 2.1rem;
    position: relative;
    /*background: yellow;*/
    overflow: hidden;
}
.guolvBox .conBox .circleBox .name{
    position: absolute;
    z-index: 999;
    font-size: 0.46rem;
    top: 0.8rem;
    left: 0.8rem;
    color: rgb(0,170,171);
}
.guolvBox .conBox .circleBox .name2{
    color: rgb(32,134,206);
}
.guolvBox .conBox .circleBox .name1{
    color: rgb(0,170,171);
}
.guolvBox .conBox .circleBox .name0{
    color: rgb(251,111,147);
}
.guolvBox .conBox .circleBox{
    .chart0{
        transform:rotate(70deg);
        transform-origin:50% 50%;
        overflow:hidden;
        float:left;
    }
    .chart1{
        transform:rotate(25deg);transform-origin:50% 50%;overflow:hidden;float:left;
    }
    .chart2{
        height: 2.1rem;width: 2.1rem;float: left;
    }
}
.guolvBox .conBox .circleBox .circle1Value{
    float: right;
    height: 100%;
    width: 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.guolvBox .conBox .circleBox .circle1Value>h4{
    color: rgb(0,170,171);
    font-size: 0.36rem;
    margin-bottom: 0.1rem;
    /*font-weight: 100;*/
}
.guolvBox .conBox .circleBox .circle1ValueRed>h4{
    color: rgb(251,111,147);
}
.guolvBox .conBox .circleBox .circle1ValueBlue>h4{
    color: rgb(32,134,206);
}
.guolvBox .conBox .circleBox .circle1Value>p{
    font-size: 0.2rem;
    color: rgb(153,153,153);
}
//面积图，浊度值
/*.areaBox{
    height: 3.7rem;
    overflow: hidden;
}
.areaBox .text{
    font-size: 0.28rem;
    padding: 0.24rem 0.6rem 0;
    overflow: hidden;
}
.areaBox .text .left{
    float: left;
    color: #868686;
    margin-right: 0.5rem;
    height: 0.4rem;
    line-height: 0.4rem;
}
.areaBox .text .left>span{
    font-size: 0.37rem;
    color: #02be8b;
    margin: 0 0.2rem;
}
.areaBox .text .right{
    float: left;
    color: #c8c8ca;
    height: 0.4rem;
    line-height: 0.4rem;
}
.areaBox .text .right>span{
    color: #fa7f9e;
    margin: 0 0.2rem;
}*/

.germLvBox{
    width: 7rem;
    height: 2rem;
    float: left;
    background: linear-gradient(to right,#fd598c,#ffb762);
    border-radius: 0 1rem 1rem 0;
    font-size: 0.2rem;
    margin-top: 0.5rem;
}
.germLvBox .left{
    float: left;
    color: #fff;
    padding: 0.45rem 0 0 0.65rem;
}
.germLvBox .left>p{
    font-size: 0.2rem;
}
.germLvBox .left .bot{
    margin-top: 0.23rem;
    
}
.germLvBox .left .bot .txt{
    float: left;
    width: 2.24rem;
    height: 0.55rem;
    line-height: 0.55rem;
    text-align: center;
    background: #fff;
    font-size: 0.33rem;
    color: #FB7B94;
    border-radius: 0.1rem;
}
.germLvBox .left .bot .val{
    float: left;
    font-size: 0.4rem;
    margin-left: 0.16rem;
}
.germLvBox .right{
    float: right;
    width: 1.84rem;
    height: 1.84rem;
    background: rgba(255,255,255,.4);
    border-radius: 100%;
    margin: 0.08rem 0.08rem 0 0;
}
.germLvBox .right .circleCon{
    width: 1.68rem;
    height: 1.68rem;
    margin: 0.08rem auto;
    background: #fff;
    border-radius: 100%;
    text-align: center;
    line-height: 1.68rem;
    font-size: 0.36rem;
    color: #fb7b94;
}
.linBg{
    float: left;
    width: 100%;
}
.linBg .lineBox{
    overflow: hidden;
    min-height: 4.7rem;
}
.linBg .lineBox .dateHead{
    height: 0.74rem;
    background:linear-gradient(to left, #2ab190, #d0d902);
}
.linBg .lineBox .dateHead .titCon{
    width: 2.5rem;
    margin: 0 auto;
    text-align: center;
}
.linBg .lineBox .dateHead .titCon .icon{
    float: left;
    width:0.11rem ;
    height: 0.18rem;
    background: url(../img/dateL.png) no-repeat center;
    background-size: cover;
    margin-top: 0.28rem;
}
.linBg .lineBox .dateHead .titCon .right{
    background: url(../img/dateR.png) no-repeat center;
    background-size: cover;
    float: right;
}
.linBg .lineBox .dateHead .titCon>input{
    font-size: 0.34rem;
    color: #fff;
    background: transparent;
    text-align: center;
    border: 0;
    width: 2rem;
    height:0.75rem ;
    line-height: 0.75rem;
}
.linBg .lineBox .conBox{
    
    
}
.linBg .lineBox .conBox .top{
    min-height: 0.74rem;
    font-size: 0.16rem;
    color: #888888;
    padding: 0.2rem 0.34rem 0;
}
.linBg .lineBox .conBox .top .left{
    float: left;
    width: 4.2rem;
    color: #666;
    margin-top: 0.1rem;
}
//.linBg .lineBox .conBox .top .left>div{
//  float: left;
//  padding: 0 0.12rem 0 0;
//}
//.linBg .lineBox .conBox .top .left .Mg{
//  padding: 0;
//}   
.linBg .lineBox .conBox .top .right{
    float: right;
}
.linBg .lineBox .conBox .top .right>div{
    
}
.linBg .lineBox .conBox .top .right>div::before{
    content: "";
    display: inline-block;
    width: 0.09rem;
    height: 0.09rem;
    border-radius: 100%;
    background: linear-gradient(to right,#cbd802,#27b18d);
    position: relative;
    top: 0.05rem;
    left: -0.05rem;
}
.linBg .lineBox .conBox .top .right>.legendMg::before{
    background: linear-gradient(to right,#fc5a8c,#feb75d);
}
#all{
    color: #2865b5;
}
#Ca{
    color: #00C087;
}
#Mg{
    color:#fc6e94;

}
.habitScoreBg{
    float: left;
    width: 100%;
    margin: 0.3rem 0 0.5rem;
}
.habitScore{
    height: 2.94rem;
    margin: 0 auto;
}
.habitScore .left{
    float: left;
    width: 2.22rem;
    height: 2.22rem;
    background: linear-gradient(to right,#ccdc00,#26b28d);
    margin: 0.36rem;
    border-radius: 100%;
}
.habitScore .left .bgWhite{
    border-radius: 100%;
    width: 2.08rem;
    height: 2.08rem;
    background: #fff;
    margin: 0.06rem auto;
}
.habitScore .left .bgWhite .conBox{
    width: 1.94rem;
    height: 1.94rem;
    /*background: #00C087;*/
    margin: 0 auto;
    border-radius: 100%;
    position: relative;
    top: 0.07rem;
    overflow: hidden;
}
.habitScore .left .bgWhite .con{
    width: 1.94rem;
    height: 1.94rem;
    background: linear-gradient(to bottom,#ccdc00,#26b28d);
    /*background: #00C087;*/
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    /*position: relative;*/
    overflow: hidden;
    opacity: .7;
}
//遮罩
.habitScore .left .bgWhite .con .mask{
    width: 1.94rem;
    height: 2.3rem;
    background: url(../img/mask.png) no-repeat 0 bottom;
    background-size: cover;
    position: absolute;
    bottom: 1.6rem;
    z-index: 2;
}

.habitScore .left .bgWhite .con .score{
    color: #fff;
    font-size: 0.42rem;
    position: absolute;
    width: 1.94rem;
    height: 1.94rem;
    text-align: center;
    line-height: 2.1rem;
}
.habitScore .right{
    /*width: 2.8rem;*/
    float: right;
    font-size: 0.16rem;
    color:#00C087;
    padding-right: 0.36rem;
}
.habitScore .right .tit{
    font-size: 0.28rem;
    padding: 0.5rem 0 0.2rem;
}
.habitScore .right .line{
    height: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.05rem;
}
.habitScore .right .line>div{
    float: left;
}
.habitScore .right .line .contain{
    width: 1.4rem;
    height: 0.1rem;
    background: #c8c9cb;
    border-radius: 0.05rem;
    margin: 0 0.2rem;
}
.habitScore .right .line .contain .con{
    height: 0.1rem;
    border-radius: 0.05rem; 
    background: linear-gradient(to right,#cbd805,#27b18d);
    width: 20%;
}
